<!-- 内容屏 -->
<template>
  <div class="content">
    <canvasfont />
    <!-- 蒙版 -->
    <div class="mask" v-if="maskframe"></div>
    <div class="corpmask" v-if="corpmask"></div>
    <relogin v-if="relogin" @childClick="reloginClick" />
    <cropimage
      v-if="cropimage"
      :cropimg="cropimageimg"
      @cropimage="picturetoolcropimage"
    />
    <illuminateimage
      v-if="illuminateimage"
      :illuminate="illuminateimageimg"
      @illuminateimage="picturetoolilluminateimage"
    />
    <stagetooltip v-if="stagetooltip" @childClick="stagetooltipchildClick" />
    <stagetooltipconsave
      v-if="stagetooltipconsave"
      :title="consavetitle"
      @childClick="stagetooltipconsavechildClick"
    />
    <stagetooltipdel
      v-if="stagetooltipdel"
      :stagetooltipcon="stagetooltipcon"
      @childClick="stagetooltipdelchildClick(arguments)"
    />
    <stagetoolload v-if="loadingframe" @interrupt="loadinterrupt" />
    <stagetooltextload v-if="textloadingframe" />

    <!-- 头部 -->
    <compileTop
      :title="headline"
      @save="compileTopsaveValue"
      @historyprocess="historyprocess"
      @layerstool="layerstool"
      :process="process"
      :online="online"
    />
    <!-- 内容 -->
    <div class="con">
      <div class="con_left" :style="{width:rightshow?'345px':'80px'}">
        <!-- 内容——左——列1 -->
        <div class="material_tit">
          <div
            v-for="(v, i) in materialTit"
            :key="i"
            @click.stop="materialTitClick(i)"
          >
            <template v-if="i!=materialTit.length-1">
            <div
              class="img_div"
              :style="{ background: v.select ? '#2b2b2b' : 'transparent' }"
            >
              <img v-if="v.select" :src="v.opt" alt="" />
              <img v-else :src="v.img" alt="" />
            </div>
            <p :class="v.select ? 'active' : ''">{{ v.tit }}</p>
          </template >
            <!-- 文案库按钮 -->
          <template v-else >
            <div style="position: absolute;bottom: 20px;">
              <div
                class="img_div"
                :style="{ background: v.select ? '#2b2b2b' : 'transparent' }"
              >
                <img v-if="v.select" :src="v.opt" alt="" />
                <img v-else :src="v.img" alt="" />
              </div>
              <p :class="v.select ? 'active' : ''">{{ v.tit }}</p>
            </div>
           </template >
          </div>
        </div>
        <!-- 内容——左——列2 -->

        <div class="material_list">
          <div class="list_classify" v-if="rightLists">
            <p class="list_p active" @click.stop="materialAll()">{{ cons }}</p>
          </div>
          <!-- 分类 -->
          <div class="list_classify" v-if="rightList">
            <p class="list_p active" @click.stop="materialAll()">{{ con }}</p>
            <p
              v-for="(v, i) in materialListTit"
              :key="i"
              @click.stop="materialListTitClick(i)"
              :class="['list_p', v.select ? 'active' : '']"
              :style="
                v.border
                  ? 'border-bottom:2px solid #2b2b2b'
                  : 'border-bottom:2px solid transparent'
              "
            >
              {{ v.tit }}
            </p>
          </div>
          <!-- 添加按钮  -->
          <div
            v-if="addtextbutton"
            class="list_addbot clickdiv"
            :style="{
              'margin-top':
                rightpicseachbox ||
                rightmodelseachbox ||
                rightlogoseachbox ||
                custompicseachbox ||
                customlogoseachbox
                  ? ''
                  : '46px',
            }"
            @click="addmaterialClick"
          >
            <p>+ 添加{{ cons }}</p>
          </div>
          <custompicseach
            v-if="custompicseachbox"
            :picListSearch="cuspicListSearch"
            @searchval="cuspicsearchval"
            @searchallval="cuspicSearchALLVal"
            @searchtext="cuspicSearchText"
          />
          <customlogoseach
            v-if="customlogoseachbox"
            :picListSearch="cuslogoListSearch"
            @searchval="cuslogosearchval"
            @searchallval="cuslogoSearchALLVal"
            @searchtext="cuslogoSearchText"
          />
          <rightmodelseach
            v-if="rightmodelseachbox"
            :modelListSearch="modelListSearch"
            :classifytem="classifytem"
            @searchVal="modelListSearchVal"
            @searchALLVal="modelSearchALLVal"
            @searchtext="modelSearchText"
          />
          <righthisseach
            v-if="righthisseachbox"
            :modelListSearch="hisListSearch"
            @searchval="hisListSearchVal"
            @searchALLVal="hisSearchALLVal"
            @searchtext="hisSearchText"
          />
          <rightpicseach
            v-if="rightpicseachbox"
            :picListSearch="picListSearch"
            :classifypic="classifypic"
            @searchval="picsearchval"
            @searchallval="picSearchALLVal"
            @searchtext="picSearchText"
          />
          <rightlogoseach
            v-if="rightlogoseachbox"
            :logoListSearch="logoListSearch"
            :classifylogo="classifylogo"
            @searchval="logosearchval"
            @searchALLVal="logoSearchALLVal"
            @searchtext="logoSearchText"
          />
          <righthistory
            v-if="listhisbox"
            :scrollTop="hisscrollTop"
            :rightlistList="righthisList"
            @TemplateListCon="TemplateListconchildByImg"
            @TemplateListPage="HisListPage"
            @scroll="righthisListscroll"
          />
          <rightlist
            v-if="listbox"
            :rightlistList="rightlistList"
            :scrollTop="scrollTop"
            :classifytem="classifytem"
            @TemplateListCon="TemplateListconchildByImg"
            @TemplateListPage="TemplateListPage"
            @scroll="rightListscroll"
          />
          <rightpiclist
            v-if="listpicbox"
            :rightpicList="rightpicList"
            :picscrollTop="picscrollTop"
            :classifypic="classifypic"
            @childvalue="rightpiclistchildValue(arguments)"
            @picListPage="picListPage"
            @scroll="rightpicListscroll"
          />
          <rightlogolist
            v-if="logolistbox"
            :rightlogoList="rightlogoList"
            :logoscrollTop="logoscrollTop"
            :classifylogo="classifylogo"
            @childValue="rightlogolistchildValue(arguments, 1)"
            @LogoListPage="LogoListPage"
            @scroll="rightlogoListscroll"
          />
          <custompiclist v-if="cuspiclistbox" :rightpicList="cuspicList" />
          <customlogolist
            v-if="cuslogolistbox"
            :rightpicList="cuslogoList"
            :picscrollTop="cuspicscrollTop"
            :cuslogolistdel="cuslogolistdel"
            @materialDel="cuspicscrollmaterialDel"
            @childvalue="rightlogolistchildValue(arguments, 0)"
            @picListPage="cuslogoListPage"
            @scroll="cuslogoListscroll"
          />
          <righttextbottom
            v-if="textbottombox"
            @childValue="righttextbottomchildValue"
          />
          <rightfloat
            v-if="floatlistbox"
            @childleave="floatlistboxchildleave"
            @childlist="floatlistboxchildlist(arguments)"
          />
          <rightclip v-if="clipbox" />
        </div>
      </div>
      <!-- 内容——中 -->
      <div class="con_cen" ref="center" :style="{width:rightshow?'calc(100vw - 620px)':'calc(100vw - 200px)'}" @click.self="centershowstageClick">
        <!-- 文案库列表 -->
        <wenankucenter v-if="!rightshow">
        </wenankucenter>
        <button class="container_button" v-for="(v, i) in listEllipse" :key="i">
          点击添加图片
        </button>
        <templatematerial
          v-if="material"
          :name="materialname"
          @childByValue="materialclassitychildByValue"
          @relogin="reloginFun"
        />
        <div id="container" v-show="container" :style="scaleFun">
          <v-stage
            ref="stage"
            id="stage"
            :config="configKonva"
            @mousedown="handleMousedown"
          >
            <v-layer
              ref="layer"
              @dragmove="layerDragMove"
              @dragend="layerDragEnd"
            >
              <v-rect :config="configKonva" />
              <v-image
                v-for="item in listImg"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-image
                v-for="item in listlogo"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-text
                v-for="item in listNote"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-ellipse
                v-for="item in listEllipse"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @dragmove.self="eleDragmoveTransform"
                @transform.self="eleDragmoveTransform"
                @dragstart.self="eleTransformstart"
                @dragend.self="eleDragend"
                @transformstart.self="eleTransformstart"
                @transformend.self="eleTransformend"
                @mouseenter.self="stageMouseenter"
              />
              <v-rect
                v-for="item in listRect"
                :key="item.config.name"
                :ref="item.config.name"
                :config="item.config"
                @mouseout="stageMouseleave"
              />
              <v-line v-for="(v, i) in assistline" :config="v" :key="i" />
              <v-transformer
                ref="transformerText"
                :config="{
                  rotateEnabled: true,
                  borderStroke: '#000000',
                  anchorFill: '#e9e9e9',
                  anchorSize: 5,
                  borderStrokeWidth: 2,
                  anchorSize: 20,
                  padding: 5,
                  anchorStroke: 'transparent',
                  anchorCornerRadius: 30,
                  rotateAnchorOffset: 10,
                  rotationSnapTolerance: 0,
                  shouldOverdrawWholeArea: false,
                }"
              />
            </v-layer>
          </v-stage>
        </div>
      </div>
      <div class="con_right" :style="{width:rightshow?'260px':'25vw'}">
        <!-- :style="{width:rightshow?'calc(100vw - 620px)':'calc(100vw - 200px)'}" -->
        <wenankueditadd v-if="!rightshow" >
        </wenankueditadd>
        <pictureboxtool
          v-if="picturebox"
          :key="0"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="pictureboxtooldelchild"
        />
        <picturetool
          v-if="picture"
          :key="1"
          @loadele="loadele"
          @nonechild="nonechild"
          @addtrans="addtrans"
          @delchild="picturetooldelchild"
          @maskchild="picturetoolmaskchild"
          @cropele="picturetoolcropele"
          @layer="picturetoollayer"
          @update="picturetoolupdate"
          @copy="copyStageElement"
          @deductchild="eleTransformend"
          @glassylayercancel="picturetoolglassylayercancel"
          @illuminate="picturetoolilluminate"
        />
        <texttool
          v-if="text"
          :key="2"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="texttooldelchild"
          @copy="copyStageElement"
          @add="addStageElement"
          @deductchild="eleTransformend"
          @childhistory="textchildhistory(arguments)"
        />
        <datacolortool
          v-if="datacolor"
          :key="3"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="datacolortooldelchild"
          @deductchild="eleTransformend"
          @childhistory="textchildhistory(arguments)"
        />
        <logotool
          v-if="logo"
          :key="4"
          @nonechild="nonechild"
          @loadele="loadele"
          @addtrans="addtrans"
          @delchild="logotooldelchild"
          @copy="copyStageElement"
          @deductchild="eleTransformend"
        />
        <layerstool
          @save="compileTopsaveValue"
          v-if="layers"
          @layer="picturetoollayer"
          @add="addStageElement"
          @addpic="rightpiclistchild"
          @deductchild="eleTransformend"
          :formulafa="formula"
          :temid="temid"
          @saveAll="saveAll"
          @sendNode="sendNode"
          @crearImgs="crearImgs"
          :stageNode="this.$refs.stage.getNode()"
        />
      </div>
    </div>
  </div>
</template>

<script>
let elementResizeDetectorMaker = require("element-resize-detector");
import templatematerial from "@/components/compilecen/templatematerial";
import compileTop from "@/components/compiletop/compiletop";
import canvasfont from "@/components/compiletop/canvasfont";
import cropimage from "@/components/compiletop/cropimage";
import rightlist from "@/components/compileleft/rightlist";
import illuminateimage from "@/components/compiletop/illuminateimage";
import righthistory from "@/components/compileleft/righthistory";
import rightpiclist from "@/components/compileleft/rightpiclist";
import rightlogolist from "@/components/compileleft/rightlogolist";
import customlogolist from "@/components/compileleft/customlogolist";
import custompiclist from "@/components/compileleft/custompiclist";
import rightfloat from "@/components/compileleft/rightfloat";
import righttextbottom from "@/components/compileleft/righttextbottom";
import rightclip from "@/components/compileleft/rightclip";
import stagetooltip from "@/components/compilecen/stagetooltip";
import stagetooltipconsave from "@/components/compilecen/stagetooltipconsave";
import stagetooltipdel from "@/components/compilecen/stagetooltipdel";
import pictureboxtool from "@/components/editingtools/picturebox";
import picturetool from "@/components/editingtools/picture";
import texttool from "@/components/editingtools/text";
import datacolortool from "@/components/editingtools/datacolor";
import logotool from "@/components/editingtools/logo";
import layerstool from "@/components/editingtools/layers";
import wenankueditadd from "@/components/editingtools/wenankueditadd";
import stagetoolload from "@/components/compilecen/stagetoolload";
import stagetooltextload from "@/components/compilecen/stagetooltextload";
import wenankucenter from "@/components/compilecen/wenankucenter";
import rightmodelseach from "@/components/compileleft/rightmodelseach";
import rightpicseach from "@/components/compileleft/rightpicseach";
import righthisseach from "@/components/compileleft/righthisseach";
import rightlogoseach from "@/components/compileleft/rightlogoseach";
import customlogoseach from "@/components/compileleft/customlogoseach";
import custompicseach from "@/components/compileleft/custompicseach";
import relogin from "@/components/compilecen/relogin";
//utils
import mixin from "@/utils/mixin";
import { requestCode } from "@/utils";
import { mapState, mapMutations } from "vuex";

//请求
import {
  getLogoList,
  getTemplateList, //获取搜索模板列表
  // getTemplateListAll, //获取模板列表
  getTemplateTindOne, //获取模板详情
  getMaterialList,
  postMaterialHandle,
  postTemplateHandle,
  postTemplateSave,
  postUpload,
  postLogoHandle,
  getLogoDel,
} from "@/api/template";
import { postInsertOnlineLog,getOnlineCount } from "@/api/user";
export default {
  mixins: [mixin],
  components: {
    custompicseach,
    customlogoseach,
    compileTop,
    rightpiclist,
    righthistory,
    rightlist,
    rightlogolist,
    rightfloat,
    righttextbottom,
    cropimage,
    stagetooltip,
    stagetooltipconsave,
    stagetooltextload,
    wenankucenter,
    wenankueditadd,
    illuminateimage,
    rightclip,
    templatematerial,
    relogin,
    custompiclist,
    stagetooltipdel,
    customlogolist,
    // proportioncontrol,
    //tools
    pictureboxtool,
    picturetool,
    texttool,
    datacolortool,
    logotool,
    layerstool,
    stagetoolload,
    righthisseach,
    // tempicturetool,
    rightmodelseach,
    rightpicseach,
    rightlogoseach,
    canvasfont,
  },
  data() {
    //这里存放数据
    return {
      timer1:null,
      process: 0,
      rightlistList: [], //请求模板列表
      righthisList: [], //请求模板列表
      rightlogoList: [], //logo列表
      rightpicList: [], //请求素材列表
      cuspicList: [],
      cuslogoList: [],
      cacheTemplate: "",
      logoId: "",
      assistline: [],
      illuminateimage: false,
      illuminateimageimg: "",
      container: false, //舞台是否开启
      maskframe: false, //舞台蒙版
      corpmask: false, //裁剪舞台背景
      stagetooltipdel: false, //舞台删除模板框
      stagetooltipcon: "logo",
      cropimage: false, //裁切图片组件
      cropimageimg: "", //当前要裁剪的图片地址
      loadingframe: false, //处理中
      textloadingframe: false, //文字加载
      templateListId: null, //暂存舞台详情id，根据返回看是否使用新模板
      stagetooltip: false, //舞台是否保存提示框
      stagetooltipconsave: false, //缓存内容是否显示
      consavetitle: "", //缓存内容标题
      consavelist: null, //缓存内容列表
      rightmodelseachbox: true, //搜索按钮
      rightpicseachbox: false, //搜索按钮
      rightlogoseachbox: false, //搜索按钮
      modelseachtext: "", //暂存模板搜索文本
      modelhistext: "", //暂存模板历史文本
      hisListSearch: "", //模板历史是否开启搜索
      custompicseachbox: false,
      customlogoseachbox: false,
      modelListSearch: null, //模板是否开启搜索
      modelpictext: "", //暂存素材搜索文本
      cuspictext: "",
      picListSearch: null, //素材是否开启搜索
      cuspicListSearch: null,
      modellogotext: "", //暂存logo搜索文本
      cuslogotext: "",
      cuslogoListSearch: null,
      logoListSearch: null, //logo是否开启搜索
      moedelseach: true, //不在搜索状态
      picseach: true, //不在搜索状态
      logoseach: true, //不在搜索状态
      logoscrollTop: null, //返回logoscrollTop=0
      picscrollTop: null, //picscrollTop=0
      cuslogoscrollTop: null, //返回logoscrollTop=0
      cuspicscrollTop: null, //picscrollTop=0
      scrollTop: null, //返回scrollTop=0
      righthisseachbox: false,
      hisscrollTop: null,
      listhisbox: false,
      relogin: false,
      material: false,
      clipbox: false,
      rightlistpage: 1,
      rightlistpageCount: null,
      rightlogolistpage: 1,
      rightlogolistpageCount: null,
      rightpiclistpage: 1,
      rightpiclistpageCount: null,
      cuslogolistpage: 1,
      cuslogolistpageCount: null,
      cuspiclistpage: 1,
      cuspiclistpageCount: null,
      righthislistpage: 1,
      righthislistpageCount: null,
      rightList: true,
      rightLists: false,
      listbox: true,
      logolistbox: false,
      floatlistbox: false,
      listpicbox: false,
      textbottombox: false,
      cuspiclistbox: false,
      cuslogolistbox: false,
      //tools
      picturebox: false,
      picture: false,
      text: false,
      datacolor: false,
      logo: false,
      layers: false,
      tempicture: false,
      addtextbutton: false,
      cuslogolistdel: null,
      timer: null,
      //compileTop-标题
      headline: "内容图编辑",
      afterbackimg: [], //置于背景之后的图片名称
      rightshow:true,//文案库列表面板
      img1: require("@/assets/img/trans.png"),
      //内容——左——列1列表
      materialTit: [
        {
          img: require("@/assets/img/moban.png"),
          opt: require("@/assets/img/moban1.png"),
          tit: "模板库",
          select: true,
        },
        {
          img: require("@/assets/img/cucai.png"),
          opt: require("@/assets/img/cucai1.png"),
          tit: "素材库",
          select: false,
        },
        {
          img: require("@/assets/img/logo.png"),
          opt: require("@/assets/img/logo1.png"),
          tit: "LOGO库",
          select: false,
        },
        {
          img: require("@/assets/img/text.png"),
          opt: require("@/assets/img/text1.png"),
          tit: "文字",
          select: false,
        },
        // {
        //   img: require("@/assets/img/自定义素材库.png"),
        //   opt: require("@/assets/img/自定义素材库选中.png"),
        //   tit: "自定义素材库",
        //   select: false,
        // },
        {
          img: require("@/assets/img/自定义logo库.png"),
          opt: require("@/assets/img/自定义logo库选中.png"),
          tit: "自定义logo库",
          select: false,
        },
        {
          img: require("@/assets/img/历史模版.png"),
          opt: require("@/assets/img/历史模版选中.png"),
          tit: "历史模版",
          select: false,
        },
        {
          img: require("@/assets/img/抠图.png"),
          opt: require("@/assets/img/抠图选中.png"),
          tit: "工具箱",
          select: false,
        }
        ,{
          img: require("@/assets/img/文案库.png"),
          opt: require("@/assets/img/文案库选中.png"),
          tit: "文案库",
          select: false,
        },
      ],
      con: "模板分类",
      materialname: "素材",
      cons: "",
      // 内容——左——列2——分类名称列表
      materialListTit: [
        {
          tit: "常用",
          select: false,
          border: false,
        },
        {
          tit: "收藏",
          border: false,
          select: false,
        },
        {
          tit: "选择分类",
          border: false,
          select: false,
        },
      ],
      //模板素材logo分类
      classifytem: 0,
      classifylogo: 0,
      classifypic: 0,
      userId: window.localStorage.getItem("eplatformid"),
      token: window.localStorage.getItem("eplatformtoken"),
      parid: "",
      sonid: "",
      GUIDELINE_OFFSET: 0,
      //所选择模板的公式
      formula: "",
      downLoadPageNum: -1,
      // 分页数
      pageNum: 1,
      // 每页5张
      pageSize: 5,
      resImgs: [],
      showImgs: [],
      //分页的结果
      imgListShow: true,
      //重新选择模板
      temid: "",
      //避免重复下载
      oldtimestr: "",
      online:null,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("templateStage", [
      //舞台是否开启
      "proscenium",
      //舞台大小
      "configKonva",
      //元素
      "listImg",
      "listlogo",
      "listNote",
      "listEllipse",
      "listRect",
      "keybox",
      //当前被选中的元素
      "modifyele",
      "modifyele",
      //图片大小
      "imgW",
      "imgH",
      //centerDom
      "maxW",
      "maxH",
      //舞台的元素个数
      "numberRefs",
      //选中元素name
      "selectedShapeName",
      //缩小比例
      "backSize",
      // "editbackSize",
      //舞台
      "konvaname",
      "konvaid",
      //图片数量
      "imgnum",
      //文字
      "textfontsize",
      "textfontFamily",
      "sizeListC",
      "clickname",
      "textNode",
      "backImg",
      "cancelName",
      "keyele",
      "historylist", //历史列表
      "historycurrentpage", //历史当前进程
      "onelevel",
      "twolevel",
      "threelevel",
    ]),
    rules: {
      get() {
        return this.$store.state.templateStage.rules;
      },
      set(val) {
        return (this.$store.state.templateStage.rules = val);
      },
    },
    scaleFun: function () {
      let { imgW, imgH, backSize, maxW, maxH } = this;
      return `width:${imgW}px;height:${imgH}px;transform: translate(${
        (maxW - imgW) / 2
      }px,${(maxH - imgH) / 2}px) scale(${backSize});position:absolute`;
    },
    changeData() {
      const { listImg, listlogo, listNote } = this;
      return {
        listImg,
        listlogo,
        listNote,
      };
    },
  },
  //监控data中的数据变化
  watch: {
    changeData: function (newV) {
      this.GUIDELINE_OFFSET =
        newV.listImg.length + newV.listlogo.length + newV.listNote.length;
    },
    classifytem(val) {
      if (val != 3) {
        this.parid = "";
        this.sonid = "";
      }
    },
    classifypic(val) {
      if (val != 3) {
        this.parid = "";
        this.sonid = "";
      }
    },
    maxW() {
      this.$datatools.debounce(
        this.$createstage.Screensize(this, this.maxW, this.maxH),
        1000
      );
    },
    proscenium(val) {
      if (val) {
        this.timer = setInterval(() => {
          this.$createstage.contentLocalCache(this);
        }, 5000);
      } else clearInterval(this.timer);
    },
  },
  //方法集合
  methods: {
    ...mapMutations("templateStage", ["setRules", "cleartemplateAllText"]),
    /**
     * 接收图片列表渲染
     */
    sendNode(nodes) {
      this.resImgs = nodes;
      this.showImgs = this.resImgs.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    },
    /**
     * 右键
     */
    contextmenu() {
      console.log("qqqqqqqqq");
    },
    topre() {
      console.log("上一页");
    },
    tonext() {
      console.log("下一页");
      let pn = this.pageNum;
      pn = pn + 1;
      this.pageNum = pn;
      this.showImgs = this.resImgs.slice(
        (pn - 1) * this.pageSize,
        pn * this.pageSize
      );
    },
    getTableDate() {},
    /**
     * 清除图片列表内容
     */
    crearImgs() {
      this.resImgs = [];
    },
    materialclassitychildByValue(childValue) {
      this.maskframe = false;
      this.material = childValue;
    },
    addmaterialClick() {
      this.material = !this.material;
      if (this.cons == "自定义素材库") this.materialname = "自定义素材库";
      else if (this.cons == "自定义logo库") this.materialname = "自定义logo库";
    },
    //按回退键返回图层按钮
    layerstool() {
      this.$createstage.creacteTools(this, "back");
    },
    //文本工具历史记录
    textchildhistory(property, value, name) {
      this.$createstage.saveTextHistory(this, property, value, name);
    },
    //拖拽&&旋转历史记录
    eleTransformend() {
      this.$createstage.saveHistory(this);
      // this.removeAuxiliaryLine();
    },
    eleDragend() {
      this.$createstage.saveHistory(this);
    },
    eleTransformstart() {
      // this.addAuxiliaryLine(e.target);
      if (this.historylist.length == 0) this.$createstage.saveHistory(this);
    },
    //历史进程
    historyprocess(value) {
      this.$createstage.delTransformer(this);
      this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
      this.$store.commit("templateStage/HISTORYPROCESS", value);
      this.$createstage.showHistory(this);
    },
    //点击中间部分展示舞台
    centershowstageClick() {
      if (this.proscenium) this.$createstage.creacteTools(this, "back");
    },
    //内容——左列2——分类——全部分类
    materialAll() {
      this.materialListTit.forEach((v) => {
        this.floatlistbox = false;
        v.select = false;
        v.border = false;
      });
      let tit;
      this.materialTit.forEach((v) => {
        if (v.select == true) tit = v.tit;
      });
      if (tit == "模板库") {
        this.classifytem = 0;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.classifypic = 0;
        this.RequestMaterialData();
      } else if (tit == "LOGO库") {
        this.classifylogo = 0;
        this.RequestLogoData();
      }
    },
    // 内容——左——列2——分类名称——点击选中
    materialListTitClick(i) {
      let tit;
      this.materialTit.forEach((v) => {
        if (v.select == true) tit = v.tit;
      });
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      this.materialListTit[i].select = true;
      this.materialListTit[i].border = true;
      if (tit == "模板库") {
        this.classifytem = i + 1;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.classifypic = i + 1;
        this.RequestMaterialData();
      } else if (tit == "LOGO库") {
        this.classifylogo = i + 1;
        this.RequestLogoData();
      }
      if (this.materialListTit[2].tit == "全部") return;
      else if (i == 2) this.floatlistbox = !this.floatlistbox;
      else this.floatlistbox = false;
    },
    searchContextNull() {
      this.modellogotext = "";
      this.modelpictext = "";
      this.modelseachtext = "";
    },
    //内容——左——列1——点击选中
    materialTitClick(i) {
     this.numberOnline()
      this.textbottombox = false;
      this.righthisseachbox = false;
      this.listbox = false;
      this.rightList = true;
      this.listpicbox = false;
      this.floatlistbox = false;
      this.logolistbox = false;
      this.rightmodelseachbox = false;
      this.rightpicseachbox = false;
      this.rightlogoseachbox = false;
      this.rightLists = false;
      this.clipbox = false;
      this.addtextbutton = false;
      this.listhisbox = false;
      this.customlogoseachbox = false;
      this.custompicseachbox = false;
      this.cuspiclistbox = false;
      this.cuslogolistbox = false;
      this.con = "";
      this.materialListTit.forEach((v) => {
        v.select = false;
        v.border = false;
      });
      let { tit } = this.materialTit[i];
      this.materialTit.forEach((v) => {
        v.select = false;
      });
      this.materialTit[i].select = true;
      if (tit == "模板库") {
        this.con = "模板分类";
        this.listbox = true;
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") v.tit = "选择分类";
        });
        this.rightmodelseachbox = true;
        this.classifytem = 0;
        this.rightshow = true;
        this.RequestInitialData();
      } else if (tit == "素材库") {
        this.con = "素材分类";
        this.materialListTit.forEach((v) => {
          if (v.tit == "全部") v.tit = "选择分类";
        });
        this.listpicbox = true;
        this.rightpicseachbox = true;
        this.classifypic = 0;
        this.RequestMaterialData();
        this.rightshow = true;
      } else if (tit == "LOGO库") {
        this.con = "LOGO";
        this.logolistbox = true;
        this.materialListTit.forEach((v) => {
          if (v.tit == "选择分类") v.tit = "全部";
        });
        this.rightlogoseachbox = true;
        this.classifylogo = 0;
        this.RequestLogoData();
        this.rightshow = true;
      } else if (tit == "文字") {
        this.rightList = false;
        this.textbottombox = true;
        this.rightshow = true;
      } else if (tit == "自定义素材库") {
        this.rightList = false;
        this.rightLists = true;
        this.custompicseachbox = true;
        this.addtextbutton = true;
        this.cons = "自定义素材库";
        this.cuspiclistbox = true;
        this.RequestCusMaterialData();
        this.rightshow = true;
      } else if (tit == "自定义logo库") {
        this.rightList = false;
        this.rightLists = true;
        this.customlogoseachbox = true;
        this.addtextbutton = true;
        this.cuslogolistbox = true;
        this.cons = "自定义logo库";
        this.rightshow = true;
        this.RequestCusLogoData();
      } else if (tit == "工具箱") {
        this.rightList = false;
        this.rightLists = false;
        this.rightshow = true;
        this.clipbox = true;
      } else if (tit == "历史模版") {
        this.rightList = false;
        this.rightLists = true;
        this.cons = "历史模版";
        this.rightshow = true;
        this.righthisseachbox = true;
        this.listhisbox = true;
        this.RequestInitialhisData();
      }else if(tit=="文案库"){
        this.rightList = false;
        this.rightLists = false;
        this.righthisseachbox = false;
        this.listhisbox = false;
        this.rightshow = false;
        this.text = false;
        this.layers = false;
      }
    },
    //取消canvas右键默认事件----------------------
    cancelCanvasRightclickDefaultevent() {
      window.document.oncontextmenu = function () {
        return false;
      };
    },
    //监听dom-----------------------------------------
    listeningDom() {
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.center, (ele) => {
        this.$store.commit("templateStage/MAXW", ele.offsetWidth - 10);
        this.$store.commit("templateStage/MAXH", ele.offsetHeight - 10);
      });
    },
    //内容——左——列2——浮动盒子
    floatlistboxchildleave(value) {
      this.floatlistbox = value;
    },
    floatlistboxchildlist(val) {
      this.parid = val[0];
      this.sonid = val[1];
      //判断是模板列表还是素材列表
      if (this.con == "模板分类") this.RequestInitialData(1, val[0], val[1]);
      else if (this.con == "素材分类")
        this.RequestMaterialData(1, val[0], val[1]);
    },
    //保存---------------------------------------------
    compileTopsaveValue(type) {
      this.$store.commit("templateStage/CLEARREATLIST", []);
      this.$createstage.delTransformer(this);
      this.layer.draw();
      if (this.proscenium) {
        this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
        this.$nextTick(() => {
          setTimeout(() => {
            this.canvasCopy(type);
            this.uploadTemplate();
            //上传临时模板
          }, 50);
        });
      }
    },
    async uploadTemplate() {
      this.loadingframe = true;
      this.maskframe = true;
      let stage = this.$refs.stage.getNode();
      this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
      this.$createstage.delTransformer(this);
      // //图片下载到本地 base64
      let dataURL = stage.toDataURL({ pixelRatio: 0.3 });
      let templateTag = this.$datatools.TextToPinyin(this.konvaname);
      let textObj = [];
      let materialObj = [];
      let imgBoxObj = [];
      let logoObj = [];
      //素材
      for (const v of this.listImg) {
        let obj = {};
        //滤镜
        obj.filters = [];
        v.config.filters.forEach((v) => {
          obj.filters.push(v.name);
        });
        obj.brightness = v.config.brightness;
        obj.draggable = v.config.draggable;
        obj.h = v.config.h;
        obj.height = v.config.height;
        obj.name = v.config.name;
        obj.opacity = v.config.opacity;
        obj.picname = v.config.picname;
        obj.s = v.config.s;
        obj.strokeEnabled = v.config.strokeEnabled;
        obj.w = v.config.w;
        obj.width = v.config.width;
        obj.x = v.config.x;
        obj.y = v.config.y;
        obj.z = v.config.z;
        obj.scaleX = v.config.scaleX;
        obj.scaleY = v.config.scaleY;
        //图片
        if (v.config.image.src.indexOf("data:image") > -1) {
          //是base
          let array = this.$datatools.baseToType(v.config.image.src);
          let fd = new FormData();
          let blob = new Blob([new Uint8Array(array)], {
            type: "image/png",
          });
          fd.append("file", blob, `上传图片.png`);

          let info = await postUpload(fd);
          if (!info.data.code == 0) {
            requestCode(info, "保存成功", "网络超时");
            return;
          }
          obj.image = info.data.url;
        } else obj.image = v.config.image.src;
        materialObj.push(obj);
        this.numberOnline()
      }

      //logo
      for (const v of this.listlogo) {
        let obj = this.$datatools.deepcopy(v.config);
        //滤镜
        obj.filters = [];
        v.config.filters.forEach((v) => {
          obj.filters.push(v.name);
        });
        //图片
        if (v.config.image.src.indexOf("data:image") > -1) {
          //是base
          let array = this.$datatools.baseToType(v.config.image.src);
          let fd = new FormData();
          let blob = new Blob([new Uint8Array(array)], {
            type: "image/png",
          });
          fd.append("file", blob, `上传图片.png`);
          let info = await postUpload(fd);

          obj.image = info.data.url;
        } else obj.image = v.config.image.src;
        logoObj.push(obj);
      }
      //文本
      this.listNote.forEach((v) => {
        let obj = this.$datatools.deepcopy(v.config);
        textObj.push(obj);
      });
      // 图片框
      this.listEllipse.forEach((v) => {
        let obj = this.$datatools.deepcopy(v.config);
        imgBoxObj.push(obj);
      });
      let array = this.$datatools.baseToType(dataURL);
      textObj = JSON.stringify(textObj);
      materialObj = JSON.stringify(materialObj);
      imgBoxObj = JSON.stringify(imgBoxObj);
      logoObj = JSON.stringify(logoObj);
      let userId = window.localStorage.getItem("eplatformid");
      let token = window.localStorage.getItem("eplatformtoken");
      if (userId && token) {
        let fd = new FormData();
        let blob = new Blob([new Uint8Array(array)], { type: "image/png" });
        fd.append("file", blob, `${this.konvaname}.png`);
        fd.append("templateName", this.konvaname);
        fd.append("templateTag", templateTag);
        fd.append("textObj", textObj);
        fd.append("materialObj", materialObj);
        fd.append("imgBoxObj", imgBoxObj);
        fd.append("logoObj", logoObj);
        fd.append("firstType", this.onelevel);
        fd.append("secondType", this.twolevel);
        fd.append("tagIds", this.threelevel);
        fd.append("dataType", 2);
        fd.append("userId", userId);
        fd.append("token", token);
        fd.append("rule", this.rules);
        // //展示舞台上传
        if (this.konvaid) fd.append("templateId", "");
        let text = `${this.konvaname}+${templateTag}+${textObj}+${materialObj}+${imgBoxObj}+${logoObj}`;
        if (this.cacheTemplate != text || this.cacheTemplate == "") {
          this.cacheTemplate = text;
          let info = await postTemplateSave(fd);
          if (info) {
            this.loadingframe = false;
            this.maskframe = false;
            requestCode(info, "保存成功", "网络超时");
            this.RequestInitialhisData();
          }
        }
        this.numberOnline()
        this.loadingframe = false;
        this.maskframe = false;
      } else {
        this.relogin = true;
        this.maskframe = true;
      }
    },
    /**
     * 批量下载 不重复下载
     */

    saveAll(pageNum, type) {
      this.$createstage.delTransformer(this);
      this.layer.draw();
      if (this.proscenium) {
        this.$store.commit("templateStage/SELECTEDSHAPENAME", "");
        this.$nextTick(() => {
          setTimeout(() => {
            this.canvasCopy(type);
            this.uploadTemplate();
            //上传临时模板
          }, 50);
        });
      }
    },
    add0(num) {
      return num < 9 ? "0" + num : "" + num;
    },
    //保存复制图片工具
    async canvasCopy(type) {
      let stage = this.$refs.stage.getNode();
      let dataURL = stage.toDataURL({ pixelRatio: 1 });
      var date = new Date();
      var days = date.getDate();
      days = this.add0(days);
      var hours = date.getHours();
      hours = this.add0(hours);
      var minute = date.getMinutes();
      minute = this.add0(minute);
      var second = date.getSeconds();
      second = this.add0(second);
      var timeStr = days + hours + minute + second;
      if (timeStr == this.oldtimestr) {
        return;
      }
      this.oldtimestr = timeStr;
      if (type == 1) {
        this.$datatools.downloadURI(dataURL, `${this.konvaname + timeStr}.png`);
      } else {
        const data = await fetch(dataURL);
        const blob = await data.blob();
        let ClipboardItem = window.ClipboardItem;
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        this.$message("复制成功");
      }
    },
    //工具tool-----------------------------------------
    //工具-元素锁住
    nonechild() {
      this.$createstage.delTransformer(this);
    },
    //工具-更新元素
    loadele(childValue) {
      setTimeout(() => {
        this.$nextTick(() => {
          const node = this.$refs[childValue][0].getStage();
          node.cache();
          node.getLayer().batchDraw();
        });
      }, 500);
    },
    //工具-取消上锁模式，重新添加变换器
    addtrans() {
      this.$createstage.delTransformer(this);
      this.$store.commit("templateStage/SELECTEDSHAPENAME", this.modifyele);
      this.$store.commit("templateStage/CLICKNAMEREACT", this.modifyele);
      this.$createstage.updateTransformer(this);
    },
    //picbox工具-元素锁住
    pictureboxtooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picturebox = childValue;
    },
    //图片工具-删除元素
    picturetooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.picture = childValue;
    },
    //图片工具-是否开启蒙版
    picturetoolmaskchild(childValue) {
      this.maskframe = childValue;
      this.loadingframe = childValue;
    },
    //图片工具-裁剪图片
    picturetoolcropele(childValue) {
      this.cropimageimg = "";
      let src;
      this.listImg.forEach((v) => {
        if (v.config.name == childValue) src = v.config.image.src;
      });
      if (src) {
        this.cropimageimg = src;
        this.corpmask = true;
        this.cropimage = true;
      }
    },
    //局部提亮
    picturetoolilluminate(childValue) {
      this.illuminateimageimg = "";
      let src;
      this.listImg.forEach((v) => {
        if (v.config.name == childValue) src = v.config.image.src;
      });
      if (src) {
        this.illuminateimage = true;
        this.illuminateimageimg = src;
      }
    },
    picturetoolilluminateimage(childValue) {
      this.illuminateimage = false;
      if (childValue) {
        if (this.historylist.length == 0) this.$createstage.saveHistory(this);
        this.$store.commit("templateStage/CUTIMG", childValue);
        setTimeout(() => {
          this.$createstage.saveHistory(this);
          this.loadele(this.modifyele);
        }, 200);
      }
    },
    //裁剪图片
    picturetoolcropimage(childValue) {
      this.corpmask = false;
      this.cropimage = false;
      if (childValue) {
        if (this.historylist.length == 0) this.$createstage.saveHistory(this);
        this.$store.commit("templateStage/CUTIMG", childValue);
        setTimeout(() => {
          this.$createstage.saveHistory(this);
          this.loadele(this.modifyele);
        }, 200);
      }
    },
    //图片工具-图层
    picturetoollayer(childValue) {
      this.$nextTick(() => {
        this.$store.commit("templateStage/SELECTEDSHAPENAME", childValue);
        this.$store.commit("templateStage/MODIFYELE", childValue);
        this.$store.commit("templateStage/CLICKNAMEREACT", childValue);
        this.$createstage.updateTransformer(this);
        this.$createstage.creacteTools(this, childValue);
      });
    },
    //图片工具-更新变换器
    picturetoolupdate(childValue) {
      //选中的进入数值
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      this.afterbackimg = [];
      this.listImg.forEach((v, i) => {
        if (i < index) this.afterbackimg.push(v.config.name);
      });
      //选中重新更新
      //添加变换器 - 判断是否低于背景层级 - if(低于背景图层)
      if (this.afterbackimg.indexOf(childValue) != -1)
        this.tr.shouldOverdrawWholeArea(true);
      else this.tr.shouldOverdrawWholeArea(false);
    },
    //图片工具-上锁是取消可以拖拽
    picturetoolglassylayercancel(childValue) {
      let index;
      this.listImg.forEach((v, i) => {
        if (v.config.name.indexOf("imgback") != -1) return (index = i);
      });
      let index1 = this.listImg.forEach((v, i) => {
        if (v.config.name == childValue) return i;
      });
      if (index > index1)
        //index1小于index 他就在下面
        this.tr.shouldOverdrawWholeArea(true);
      else this.tr.shouldOverdrawWholeArea(false);
    },
    //text工具-删除元素
    texttooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.text = childValue;
    },
    //data工具-删除元素
    datacolortooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.datacolor = childValue;
    },
    //logo工具-删除元素
    logotooldelchild(childValue) {
      this.$createstage.delTransformer(this);
      this.logo = childValue;
    },
    //搜索-------------------------------------
    async modelListSearchVal(key, pageNum = 1) {
      this.numberOnline()
      let { userId, token, classifytem } = this;
      if (classifytem == 0 || classifytem == 3) classifytem = 0;
      this.modelListSearch = true;
      let info = await getTemplateList({
        key,
        listType: classifytem,
        dataType: 1,
        firstType: "",
        secondType: "",
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      if (pageNum == 1) {
        this.rightlistpage = 1;
        this.rightlistList = [];
        this.scrollTop = 0;
      }
      if (info.data.data) {
        this.rightlistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightlistList.push(v);
        });
      }
    },
    async hisListSearchVal(key, pageNum = 1) {
      this.numberOnline()
      this.hisListSearch = true;
      let info = await getTemplateList({
        key,
        listType: 0,
        dataType: 2,
        firstType: "",
        secondType: "",
        userId: "",
        token: "",
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      if (pageNum == 1) {
        this.righthislistpage = 1;
        this.righthisList = [];
        this.hisscrollTop = 0;
      }
      if (info.data.data) {
        this.righthislistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.righthisList.push(v);
        });
      }
    },
    //搜索素材库
    async picsearchval(key, pageNum = 1) {
      this.numberOnline()
      let { userId, token, classifypic } = this;
      if (classifypic == 0 || classifypic == 3) classifypic = 0;
      this.picListSearch = true;
      let info = await getMaterialList({
        key, //搜索关键字
        listType: classifypic, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 1, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id  listType为1或2是必填
        token, //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      if (pageNum == 1) {
        this.rightpiclistpage = 1;
        this.rightpicList = [];
        this.picscrollTop = 0;
      }
      if (info.data.data) {
        this.rightpiclistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightpicList.push(v);
        });
      }
    },
    //搜索自定义素材库
    async cuspicsearchval(key, pageNum = 1) {

      this.cuspicListSearch = true;
      let info = await getMaterialList({
        key, //搜索关键字
        listType: 0, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 1, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId: "", //用户id  listType为1或2是必填
        token: "", //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      this.cuspiclistpageCount = Math.ceil(info.data.pageCount / 40);
      if (pageNum == 1) {
        this.cuspiclistpage = 1;
        this.cuspicList = [];
        this.cuspicscrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.cuspicList.push(v);
        });
      }
    },

    //搜索logo库
    async logosearchval(key, pageNum = 1) {
     this.numberOnline()
      let { userId, token, classifylogo } = this;
      if (classifylogo == 0 || classifylogo == 3) classifylogo = 0;
      this.logoListSearch = true;
      let info = await getLogoList({
        key, //搜索关键字
        listType: classifylogo, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 0, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id
        token, //用户token
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      this.rightlogolistpageCount = Math.ceil(info.data.pageCount / 40);
      if (pageNum == 1) {
        this.rightlogolistpage = 1;
        this.rightlogoList = [];
        this.logoscrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    //搜索自定义logo库
    async cuslogosearchval(key, pageNum = 1) {
      this.numberOnline()
      this.cuslogoListSearch = true;
      let info = await getLogoList({
        key, //搜索关键字
        listType: 0, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 1, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId: "", //用户id
        token: "", //用户token
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      this.cuslogolistpageCount = Math.ceil(info.data.pageCount / 40);
      if (pageNum == 1) {
        this.cuslogolistpage = 1;
        this.cuslogoList = [];
        this.cuslogoscrollTop = 0;
      }
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.cuslogoList.push(v);
        });
      }
    },
    rightlogoListscroll(childValue) {
      this.logoscrollTop = childValue;
    },
    cuslogoListscroll(childValue) {
      this.cuslogoscrollTop = childValue;
    },
    rightpicListscroll(childValue) {
      this.picscrollTop = childValue;
    },
    rightListscroll(childValue) {
      this.scrollTop = childValue;
    },
    righthisListscroll(childValue) {
      this.hisscrollTop = childValue;
    },
    //获取搜索内容
    modelSearchText(childValue) {
      this.modelseachtext = childValue;
    },
    //获取素材搜索内容
    picSearchText(childValue) {
      this.modelpictext = childValue;
    },
    //获取自定义素材搜索内容
    cuspicSearchText(childValue) {
      this.cuspictext = childValue;
    },
    //获取logo搜索内容
    logoSearchText(childValue) {
      this.modellogotext = childValue;
    },
    //获取自定义logo搜索内容
    cuslogoSearchText(childValue) {
      this.cuslogotext = childValue;
    },
    //获取历史模板
    hisSearchText(childValue) {
      this.modelhistext = childValue;
    },
    //搜索 展示全部
    modelSearchALLVal() {
      this.RequestInitialData();
      this.modelListSearch = true;
    },
    picSearchALLVal() {
      this.RequestMaterialData();
      this.picListSearch = true;
    },
    cuspicSearchALLVal() {
      this.RequestCusMaterialData(1);
      this.cuspicListSearch = true;
    },
    hisSearchALLVal() {
      this.RequestInitialhisData();
      this.hisListSearch = true;
    },
    logoSearchALLVal() {
      this.RequestLogoData();
    },
    cuslogoSearchALLVal() {
      this.RequestCusLogoData();
      this.cuslogoListSearch = true;
    },
    //询问是否要删除当前模板 ------------------------ stagetooltipdel
    stagetooltipdelchildClick(childValue) {
      if (childValue[0] === 1) {
        if (childValue[1] == "logo") this.cusLogoDel(this.logoId);
      }
      this.stagetooltipdel = false;
      this.stagetooltipcon = "";
      this.maskframe = false;
    },
    //logo事件 --- 删除请求事件
    async cusLogoDel(logoId) {
      let info = await getLogoDel({ logoId });
      if (info.data.code == 0) this.cuslogolistdel = this.logoId;
      requestCode(info, "删除成功", "删除失败");
    },
    //弹出框-----------------------------------
    //是否使用本地模板
    stagetooltipconsavechildClick(childValue) {
      this.maskframe = false;
      this.stagetooltipconsave = false;
      if (childValue == 1)
        this.$createstage.templateAnalysisOfData(this, this.consavelist);
    },
    //询问是否要替换当前模板 stagetooltip
    stagetooltipchildClick(childValue) {
      this.stagetooltip = false;
      this.maskframe = false;
      if (childValue === 1) {
        this.TemplateDetails(this.templateListId);
        this.loadingframe = true;
        this.maskframe = true;
      }
    },
    //舞台事件------------------------------------------
    //鼠标按下
    handleMousedown(e) {
      this.$createstage.stageMousedown(this, e);
    },
    // //进入舞台元素
    stageMouseenter(e) {
      let name = this.$datatools.fragmentreat(e.target.name());
      if (name != this.selectedShapeName)
        this.$createstage.stageMouseenter(this, e);
    },
    stageMouseleave() {
      this.$store.commit("templateStage/CLEARREATLIST", []);
    },
    //元素拖拽中或变换中
    eleDragmoveTransform(e) {
      // this.addAuxiliaryLine(e.target);
      this.$store.commit("templateStage/ELEDRAGMOVETRANSFORM", e.target);
    },
    //rightlist组件-----------------------------------
    TemplateListconchildByImg(childValue) {
      if (this.proscenium) {
        //如果舞台已经开启，先询问
        this.stagetooltip = true;
        this.templateListId = childValue;
        this.$store.commit("templateStage/CLEARREATLIST", []);
      } else {
        //直接请求
        this.$datatools.debounce(this.TemplateDetails(childValue), 20000);
        this.loadingframe = true;
      }
      this.maskframe = true;
    },
    TemplateListPage() {
      if (this.rightlistpageCount > this.rightlistpage) {
        this.rightlistpage = this.rightlistpage + 1;
        if (this.modelseachtext)
          this.modelListSearchVal(this.modelseachtext, this.rightlistpage);
        else
          this.RequestInitialData(this.rightlistpage, this.parid, this.sonid);
      }
    },
    HisListPage() {
      if (this.righthislistpageCount > this.righthislistpage) {
        this.righthislistpage = this.righthislistpage + 1;
        if (this.modelhistext)
          this.hisListSearchVal(this.modelhistext, this.righthislistpage);
        else this.RequestInitialhisData(this.righthislistpage);
      }
    },
    LogoListPage() {
      if (this.rightlogolistpageCount > this.rightlogolistpage) {
        this.rightlogolistpage = this.rightlogolistpage + 1;
        if (this.modellogotext)
          this.logosearchval(this.modellogotext, this.rightlogolistpage);
        else this.RequestLogoData(this.rightlogolistpage);
      }
    },
    picListPage() {
      if (this.rightpiclistpageCount > this.rightpiclistpage) {
        this.rightpiclistpage = this.rightpiclistpage + 1;
        if (this.modelpictext)
          this.picsearchval(this.modelpictext, this.rightpiclistpage);
        else
          this.RequestMaterialData(
            this.rightpiclistpage,
            this.parid,
            this.sonid
          );
      }
    },
    cuslogoListPage() {
      if (this.cuslogolistpageCount > this.cuslogolistpage) {
        this.cuslogolistpage = this.cuslogolistpage + 1;
        if (this.cuslogotext)
          this.cuslogosearchval(this.cuslogotext, this.cuslogolistpage);
        else this.RequestCusLogoData(this.cuslogolistpage);
      }
    },
    //图层添加素材
    rightpiclistchild(childValue) {
      this.$createstage.creactepicture(this, childValue, "pic");
    },
    //按钮添加素材
    async rightpiclistchildValue(childValue) {
      this.numberOnline()
      if (this.proscenium) {
        if (this.selectedShapeName.indexOf("pic") > -1) {
          if (this.historylist.length == 0) this.$createstage.saveHistory(this);
          this.$store.commit("templateStage/CHEANGEPIC", childValue[0]);
          setTimeout(() => {
            this.$createstage.saveHistory(this);
          }, 200);
          this.$nextTick(() => {
            this.loadele(this.selectedShapeName);
          });
        } else this.$createstage.creactepicture(this, childValue[0], "pic");
        await postMaterialHandle({
          listType: 1, //常用或者收藏    1常用  2收藏   必填
          userId: window.localStorage.getItem("eplatformid"), //用户id
          materialId: childValue[1], //素材id
          token: window.localStorage.getItem("eplatformtoken"), //用户token
          operationType: 0, //0添加,1取消
        });
      }
    },
    //按钮添加logo
    async rightlogolistchildValue(childValue, type) {
      this.numberOnline()
      if (this.proscenium) {
        if (this.selectedShapeName.indexOf("logo") > -1) {
          if (this.historylist.length == 0) this.$createstage.saveHistory(this);
          this.$store.commit("templateStage/CHEANGELOGO", childValue[0]);
          setTimeout(() => {
            this.$createstage.saveHistory(this);
          }, 200);
          this.$nextTick(() => {
            this.loadele(this.selectedShapeName);
            // this.$createstage.saveHistory(this);
          });
        } else this.$createstage.creactepicture(this, childValue[0], "logo");
        if (type == 1) {
          await postLogoHandle({
            listType: 1, //常用或者收藏    1常用  2收藏   必填
            userId: window.localStorage.getItem("eplatformid"), //用户id
            logoId: childValue[1], //模板id
            token: window.localStorage.getItem("eplatformtoken"), //用户token
            operationType: 0, //0添加,1取消
          });
        }
      }
    },

    //添加文字
    righttextbottomchildValue(childValue) {
      this.$createstage.creactetext(this, childValue);
    },
    //请求-----------------------------------------------------
    //模板列表 --- 详情请求事件
    async TemplateDetails(id) {
      this.numberOnline()
      //取消
      let info = await getTemplateTindOne({ templateId: id });
      if (info != undefined) {
        this.rules = info.data.data.rule;
        this.setRules(info.data.data.rule);
        var str = info.data.data.rule;
        this.temid = id;
        if (!str) {
          this.formula = [];
        }
        if (info.data.data.rule && str.startsWith("[")) {
          this.formula = JSON.parse(info.data.data.rule);
        }
        if (info.data.data.rule && !str.startsWith("[")) {
          var arr = [];
          arr[0] = str;
          this.formula = arr;
        }
        // sessionStorage.setItem("formulaArr",str)
        this.$createstage.templateAnalysisOfData(this, info.data.data);
        //删除文本模板
        this.cleartemplateAllText();
        await postTemplateHandle({
          listType: 1, //常用或者收藏    1常用  2收藏   必填
          userId: window.localStorage.getItem("eplatformid"), //用户id
          templateId: id, //模板id
          token: window.localStorage.getItem("eplatformtoken"), //用户token
          operationType: 0, //0添加,1取消
        });
      }
    },
    // 请求历史模板数据
    async RequestInitialhisData(pageNum = 1) {
      if (pageNum == 1) {
        this.righthisList = [];
        this.righthislistpage = 1;
        this.hisscrollTop = 0;
      }
      let info = await getTemplateList({
        key: "",
        listType: 0,
        dataType: 2,
        firstType: "",
        secondType: "",
        userId: "",
        token: "",
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      if (info.data.data) {
        this.righthislistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.righthisList.push(v);
        });
      }
    },
    // 请求模板数据
    async RequestInitialData(pageNum = 1, firstType = "", secondType = "") {
      let { userId, token, classifytem } = this;
      if (pageNum == 1) {
        this.rightlistList = [];
        this.rightlistpage = 1;
        this.scrollTop = 0;
      }
      if (classifytem == 0 || classifytem == 3) classifytem = 0;
      let info = await getTemplateList({
        key: "",
        listType: classifytem,
        dataType: 1,
        firstType,
        secondType,
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      this.rightlistpageCount = Math.ceil(info.data.pageCount / 40);
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.rightlistList.push(v);
        });
      }
    },
    // 请求素材
    async RequestMaterialData(pageNum = 1, firstType = "", secondType = "") {
      this.numberOnline()
      if (pageNum == 1) {
        this.rightpicList = [];
        this.rightpiclistpage = 1;
        this.picscrollTop = 0;
      }
      let { userId, token, classifypic } = this;
      if (this.classifypic == 0 || classifypic == 3) classifypic = 0;
      let info = await getMaterialList({
        key: "",
        listType: classifypic,
        dataType: 1,
        firstType,
        secondType,
        userId,
        token,
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      if (info.data.data) {
        this.rightpiclistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightpicList.push(v);
        });
      }
    },
    // 请求自定义素材
    async RequestCusMaterialData(pageNum = 1) {

      if (pageNum == 1) {
        this.cuspicList = [];
        this.cuspiclistpage = 1;
        this.cuspicscrollTop = 0;
      }
      let info = await getMaterialList({
        key: "",
        listType: 0,
        dataType: 1,
        firstType: "",
        secondType: "",
        userId: "",
        token: "",
        pageNum,
        pageSize: 40,
        sortType: 1,
        all: 1,
      });
      this.cuspiclistpageCount = Math.ceil(info.data.pageCount / 40);
      if (info.data.data) {
        info.data.data.forEach((v) => {
          this.cuspicList.push(v);
        });
      }
    },
    //请求logo
    async RequestLogoData(pageNum = 1) {
      this.numberOnline()
      if (pageNum == 1) {
        this.rightlogoList = [];
        this.rightlogolistpage = 1;
        this.logoscrollTop = 0;
      }
      let { userId, token, classifylogo } = this;
      if (classifylogo == 0 || classifylogo == 3) classifylogo = 0;
      let info = await getLogoList({
        key: "", //搜索关键字
        listType: classifylogo, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 0, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId, //用户id  listType为1或2是必填
        token, //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      if (info.data.data) {
        this.rightlogolistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.rightlogoList.push(v);
        });
      }
    },
    //请求自定义logo
    async RequestCusLogoData(pageNum = 1) {
      this.numberOnline()
      if (pageNum == 1) {
        this.cuslogoList = [];
        this.cuslogolistpage = 1;
        this.cuslogoscrollTop = 0;
      }
      let info = await getLogoList({
        key: "", //搜索关键字
        listType: 0, ////是否常用或者收藏   0原始列表  1常用  2收藏   必填
        dataType: 1, //数据类型:0全局(系统)  1自定义    必填
        firstType: "", //一级分类id
        secondType: "", //二级分类id
        userId: "", //用户id  listType为1或2是必填
        token: "", //用户token  listType为1或2是必填
        pageNum, //页码
        pageSize: 40, //每页数量
        sortType: 1, //排序  0正序  1倒序
        all: 1,
      });
      if (info.data.data) {
        this.cuslogolistpageCount = Math.ceil(info.data.pageCount / 40);
        info.data.data.forEach((v) => {
          this.cuslogoList.push(v);
        });
      }
    },
    //复制元素事件
    copyStageElement() {
      this.$datatools.debounce(this.$createstage.copymodifyele(this), 2000); //设置防抖
    },
    //添加文本
    addStageElement() {
      this.$datatools.debounce(
        this.$createstage.creactetext(this, "text"),
        2000
      ); //设置防抖
    },
    async numberOnline() {
      let info = await postInsertOnlineLog({
        userId: this.userId,
        token: this.token,
      });
      console.log(info);
      if (info.data.message == "鉴权失败") this.reloginClick();
    },
    //键盘事件-----------------------------------------
    KeyboardEvent() {
      let that = this;
      document.onkeyup = function () {
        let key = window.event.keyCode;
        if (that.proscenium) {
          window.event.preventDefault(); //关闭浏览器快捷键
          if (key == 67 && event.altKey) {
            that.$datatools.debounce(
              that.$createstage.copymodifyele(that),
              2000
            ); //设置防抖
          } else if (key == 46) {
            //如果舞台有元素直接删掉
            that.$datatools.debounce(
              that.$createstage.delmodifyele(that),
              2000
            ); //设置防抖
          } else if (key == 90 && event.ctrlKey) {
            that.process = that.process-1; //设置防抖
          } else if (key == 89 && event.ctrlKey) {
            that.process = that.process+1 //设置防抖
          }
        }
        if (key == 13) {
          if (that.rightmodelseachbox) {
            if (that.modelseachtext == "") return;
            else that.modelListSearch = false;
          } else if (that.rightpicseachbox) {
            if (that.modelpictext == "") return;
            else that.picListSearch = false;
          } else if (that.rightlogoseachbox) {
            if (that.modellogotext == "") return;
            else that.logoListSearch = false;
          } else if (that.righthisseachbox) {
            if (that.modelhistext == "") return;
            else that.hisListSearch = false;
          } else if (that.customlogoseachbox) {
            if (that.cuslogotext == "") return;
            else that.cuslogoListSearch = false;
          }
        }
      };
    },
    //自定义logo删除
    cuspicscrollmaterialDel(id) {
      this.logoId = id;
      this.stagetooltipdel = true;
      this.stagetooltipcon = "logo";
      this.maskframe = true;
    },

    reloginClick() {
      this.$router.replace("/login", () => {
        window.location.reload();
      });
    },
    reloginFun() {
      this.relogin = true;
      this.maskframe = true;
    },
    //辅助线
    layerDragMove(e) {
      this.assistline = [];
      let lineGuideStops = this.$createstage.getLineGuideStops(e.target, this);
      let itemBounds = this.$createstage.getObjectSnappingEdges(e.target, this);
      let guides = this.$createstage.getGuides(
        lineGuideStops,
        itemBounds,
        this
      );
      if (!guides.length) return;
      this.$createstage.drawGuides(guides, this);
      guides.forEach((lg) => {
        switch (lg.snap) {
          case "start": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
          case "center": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
          case "end": {
            switch (lg.orientation) {
              case "V": {
                e.target.x(lg.lineGuide + lg.offset);
                break;
              }
              case "H": {
                e.target.y(lg.lineGuide + lg.offset);
                break;
              }
            }
            break;
          }
        }
      });
      this.layer.draw();
    },
    layerDragEnd() {
      this.assistline = [];
      this.layer.batchDraw();
    },
    loadinterrupt() {
      this.maskframe = false;
      this.loadingframe = false;
    },
    async onlineCount() {
      let info = await getOnlineCount();
      this.online = info.data.num;
      console.log(this.online);
    },
  },
  beforeCreate() {
    // this.reload();
  }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let userId = window.localStorage.getItem("eplatformid");
    let token = window.localStorage.getItem("eplatformtoken");
    if (userId && token) return;
    else this.reloginFun();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let that = this;
    this.numberOnline();
    this.onlineCount();
    this.timer1 = setInterval(() => {
      this.onlineCount();
    }, 180000);
    this.$createstage.ClearingVuex(this);
    this.layer = this.$refs.layer.getNode();
    this.stage = this.$refs.stage.getNode();
    this.tr = this.$refs.transformerText.getNode();
    this.RequestInitialData(this.rightlistpage); //初始化模板数据
    this.KeyboardEvent(); //键盘事件
    this.listeningDom();
    this.cancelCanvasRightclickDefaultevent();
    this.textloadingframe = true;
    this.maskframe = true;
    document.fonts.ready.then(function () {
      // 字体加载完成后的逻辑
      that.textloadingframe = false;
      let stage = JSON.parse(window.localStorage.getItem("contentsave"));
      if (stage) {
        that.consavetitle = stage.templateName;
        that.consavelist = stage;
        that.stagetooltipconsave = true;
      } else that.maskframe = false;
    });
    this.tr.findOne(".rotater").fillPriority("pattern");
    let img = new Image();
    img.onload = function () {
      that.tr.findOne(".rotater").fillPatternImage(img);
      that.tr.findOne(".rotater").fillPatternRepeat('no-repeat');
    };
    img.src = this.img1;
    this.tr.getLayer().batchDraw();
    this.numberOnline();
  },

  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer1);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.content {
  position: relative;
  overflow: hidden;
  .outer();
  #id {
    height: 0;
    overflow: hidden;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(33, 33, 33, 0.24);
    z-index: 100;
  }
  .con {
    .con();
    .con_left {
      position: relative;
      height: 100%;
      .material_tit {
        width: 85px;
        height: 100%;
        float: left;
        font-size: @size;
        .roll();
        & > div {
          cursor: pointer;
          width: 100%;
          margin-top: 24px;
          .divDWJ();
          .img_div {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: @color2;
            .divDAJ();
          }
          & img {
            width: 22px;
            height: 22px;
          }
          & P {
            width: 100%;
            text-align: center;
          }
        }
        & > div:nth-child(1) {
          margin-top: 0px;
          padding-top: 16px;
        }
      }
      .material_list {
        .list_addbot {
          cursor: pointer;
          .rbottom();
          .cen();
          margin-bottom: 14px;
        }
        .conleftright();
        .list_classify {
          height: 42px;
          font-size: @size;
          .divAJS();
          .list_p {
            cursor: pointer;
            padding: 4px 0;
          }
        }
        .rightfloat-enter-active,
        .rightfloat-leave-active {
          transition: all ease 1s;
        }
      }
    }
    .con_cen {
      position: relative;
      width: calc(100vw - 620px);
      height: 100%;
      // overflow: auto;

      // .cen();
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 7px;
        background-color: #fff;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // box-shadow: inset 0 0 6px rgb(86, 82, 82);
        background: rgb(186, 180, 180);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgb(86, 82, 82);
        border-radius: 10px;
        // background: #fff;
      }
      // .divDJ();
      #container {
        // max-height: 100%;
        // max-width: 100%;
        background: #fff;
        position: relative;
        .stagemask {
          position: absolute;
          z-index: 9999;
          width: 100%;
          height: 100%;
          background: rgba(51, 49, 49, 0.766);
        }
      }
    }
    .con_right {
      .conright();
    }
  }
}
</style>